<template>
<!-- 页面开始 -->
  <div class="detail">
    <!-- 头部nav -->
    <van-nav-bar title="产品详情" left-arrow @click="goBack">
      <template #right>
        <van-icon name="share-o" @click.stop="goLogin"/>
      </template>
    </van-nav-bar> 

    <!-- 滚动外层容器 -->
    <div class="wrap">
      <!-- 滚动内层 -->
      <div class="main">
        <!-- 第一部分内容 -->
        <div class="content-one">
          <!-- 产品大图 -->
          <div class="bigPic">
            <img src="../assets/images/detail/banner.png" class="banner">
            <!-- 左上角的小标 定位-->
            <div class="left-flag">
              <img src="../assets/images/detail/lankou.png" class="lankou">
              <span >兰蔻</span>
              <img src="../assets/images/detail/lankoujt.png" class="lankoujt">
            </div>
            <!-- 成分表 定位-->
            <ul class="make-up">
              <li class="make-up-from">全成分表</li>
              <li class="make-up-go">17种成分<van-icon name="arrow" /></li>
            </ul>
            <!-- 图片标题 -->
            <h3 class="nameCh">兰蔻清滢洁面摩丝</h3>
            <p class="nameEn">LANCOME MOUSSE ECLAT CLEANSER</p>
          </div>
          <div class="product-sku">
            <p>产地：法国</p>
            <p>参考价格：¥ 350 / 200ml</p>
            <p>功效：<span class="function-clean">清洁</span></p>
            <a href="javascript:;" class="shuoming">
              <img src="../assets/images/detail/shuomingshu.png">
              <span>使用说明</span>
            </a>
          </div>
        </div>

        <!-- 第二部分内容 -->
        <div class="content-two">
          <h4 class="fuzhi-title">
            <span>适合肤质范围 </span>
            <img src="../assets/images/detail/wenhao.png">
          </h4>
          <!-- 适用范围开始 -->
          <div class="fit-range">
            <!-- 适合范围顶部 -->
            <div class="fit-top">
              <div class="fit">
                <img class="fit-color" src="../assets/images/detail/img.png"> 
                <span class="fit-text">适用范围</span>
              </div>
              <div class="fit">
                <img class="fit-color" src="../assets/images/detail/img.png"> 
                <span class="fit-text">最适范围</span>
              </div>
              <div class="fit last-fit">
                <img class="fit-color" src="../assets/images/detail/img4.png"> 
                <span class="fit-text">非适用范围</span>
              </div>
            </div>

            <!-- 干油性 -->
            <div class="fit-type">
              <p class="type-tit">干油性</p>
              <div class="type-level">
                <img class="fit-color" src="../assets/images/detail/GANYOU.png"> 
                <p>
                  <span>干</span>
                  <span>偏干</span>
                  <span>正常</span>
                  <span>混合</span>
                  <span>偏油</span>
                  <span>油</span>
                </p>
              </div>
            </div>
            <!-- 敏感性 -->
            <div class="fit-type">
              <p class="type-tit">敏感性</p>
              <div class="type-level">
                <img class="fit-color" src="../assets/images/detail/MINGAN.png"> 
                <p>
                  <span>耐受</span>
                  <span>正常</span>
                  <span>轻敏</span>
                  <span>重敏</span>
                </p>
              </div>
            </div>
            <!-- 痘痘程度-->
            <div class="fit-type">
              <p class="type-tit">痘痘程度</p>
              <div class="type-level">
                <img class="fit-color" src="../assets/images/detail/DOUDOU.png"> 
                <p>
                  <span>无痘</span>
                  <span>轻度</span>
                  <span>中度</span>
                  <span>重度</span>
                </p>
              </div>
            </div>
            <!-- 适用范围结束 -->
          </div>
          <!-- 点此查看你与这款产品的匹配度 -->
          <div class="checkout-match">
            点此查看你与这款产品的匹配度
          </div>
          <!-- 第二部分内容结束 -->
        </div>

        <!-- 第三部分 官方推荐 -->
        <div class="content-three">
          <h4>官方推荐</h4>
          <ul class="promote">
            <li class="shop-info">
              <img src="../assets/images/detail/lankou.png">
              <span>兰蔻官方旗舰店</span>
            </li>
            <li class="good-info">
              <img src="../assets/images/detail/banner.png">
              <span>兰蔻清滢洁面摩丝 </span>
            </li>
            <a href="javascript:;" class="goSearch">
            <span>前往查看</span>
              <van-icon name="arrow" />
            </a>
          </ul>
        </div>

        <!--第四部分 达人点评 -->
        <div class="content-four">
          <h4>达人点评</h4>
          <img src="../assets/images/detail/daren.png">
        </div>

        <!-- 第五部分 用户评价 -->
        <Judge />
        <!-- 滚动内层 -->
      </div> 
      <!-- 滚动内层结束 -->
    </div>

    <!-- 底部 -->
    <footer class="foot">
      <div>
        <van-icon name="like-o" />
        <span>收藏 (1911)</span>
      </div>
      <div>
        <span>用过</span>
        <img src="../assets/images/detail/judgewjx.png">
      </div>
    </footer>

 <!-- 整个页面结束 -->
  </div>
</template>

<script>
import Judge from "../components/detail/Judge .vue";
import BetterScroll from 'better-scroll';
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick();
    let bs = new BetterScroll(".wrap",{
      scrollY: true,
      click: true,
      mouseWheel: true,
      pullUpLoad: true,
    });
    bs.on("pullingUp",()=>{
      bs.refresh();
      bs.finishPullUp();
    });
  },
  components: {
    Judge,
  },
  methods: {
    goBack() { //回退一页
      this.$router.go(-1);
      // console.log(222)
    },
    goLogin() { //进入登录页
      if(!localStorage.getItem("token")) {
        this.$router.push("/login");
        // console.log(111);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/var.less";
.detail {
  width: 100%;
}
// 大图
.bigPic {
  width: 100%;
  position: relative;
  padding: 0 20px;
  .banner {
    display: block;
    width: 120px;
    height: 120px;
    margin: 40px auto 0;
  }
  // 左上角的小标
  .left-flag {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 90px;
    height: 38px;
    background: #7f7f7f;
    border-radius: 19px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-right: 8px;
    .lankou {
      width: 32px;
      height: 32px;
    }
    span {
      color: #fff;
      font-size: @S-font;
    }
    .lankoujt {
      width: 8px;
      height:10px;
    }
  }
  // 成分表
  .make-up {
    list-style: none;
    border: 2px solid #64c8c8;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-80%);
    .make-up-from {
      width: 100%;
      height: 26px;
      background: #e8f8f8;
      color: #4caaaa;
      font-size: @SS-font;
      text-align: center;
      line-height: 26px;
    }
    .make-up-go {
      width: 84px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      color: #4caaaa;
      font-size: @S-font;
      background: #fff;
    }
  }
  // 大图标题
  .nameCh {
    font-weight: 500px;
    font-size: @L-font;
    text-align: center;
    height: 60px;
    line-height: 60px;
    // background: blue;
  }
  .nameEn {
    font-size: @SS-font;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    // background: pink; 
  }
}
// 产品sku
.product-sku {
  padding: 0 20px 15px;
  // background: pink;
  position: relative;
  p {
    color: #666;
    font-size: @SS-font;
    font-weight: 600;
    height: 24px;
    line-height: 24px;
  }
  .shuoming {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 6px;
    right: 20px;
    // background: skyblue;
    img {
      width: 14px;
      height: 16px;
      margin-right: 5px;
    }
    span {
      color: #333;
      font-size: @S-font;
    }
  }
  // 清洁功能
  .function-clean {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 24px;
    border: 1px solid #64c8c8;
    color: #64c8c8;
    font-size: 12px;
    border-radius: 11px;
    letter-spacing: 2px;
  }
}
// 适合肤质范围
.content-two {
  width: 100%;
  overflow: hidden;
  // background: skyblue;
  .fuzhi-title {
    font-size: @L-font;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:  15px 15px 20px 15px;
    img {
      width: 24px;
      height: 24px;
    }
  }
}
.fit-range {
  padding: 0 30px;
  .fit-top {
    width: 312px;
    height: 24px;
    background-image: url("../assets/images/detail/img5.png");
    background-size: 312px 24px;
    margin: 0 auto 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: @SS-font;
    color: #333;
    .fit-color {
      width: 12px;
      height: 6px;
      margin-right: 4px;
    }
  }
  // 适用类型
  .fit-type {
    display: flex;
    height: 60px;
    justify-content: space-between;
    // border: 1px solid red;
    .type-tit {
      font-size: @SS-font;
      color:#48a9a9;
      line-height: 40px;
      font-weight: 600;
    }
    .type-level {
      width: 234px;
      height: 60px;
      // border: 1px solid blue;
      padding: 0;
      img {
        width: 234px;
        height: 10px;
      }
      p {
        display: flex;
        justify-content: space-around;
        font-size: @SS-font;
        color: #6e6e6e;
      }
    }
      
  }
}
// 查看肤质匹配度
.checkout-match {
  width: 100%;
  height: 46px;
  background: url("../assets/images/detail/PIPEI.png") center center no-repeat;
  background-size: 343px 46px;
  text-align: center;
  line-height: 46px;
  font-size: @S-font;
  font-weight: 600;
  color: #31cbc9;
  margin-top: 20px;
}
// 第三部分内容
.content-three {
  width: 100%;
  height: 140px;
  // background: blueviolet;
  padding: 0 16px;
  margin-top: 34px;
  h4 {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .promote {
    width: 100%;
    border: 1px solid #e6b2b2;
    border-radius: 5px;
    position: relative;
    .shop-info {
      background: #e6b2b2;
      display: flex;
      align-items: center;
      height: 44px;
      img {
        width: 26px;
        height: 26px;
        margin: 0 10px;
      }
      span {
        font-size: @SS-font;
        color: #e62111;
      }
    }
    .good-info {
      width: 100%;
      height: 71px;
      display: flex;
      align-items: center;
      img {
        width: 48px;
        height: 48px;
        margin: 0 5px 10px;
      }
      span {
        font-size: @S-font;
        font-weight: 600;
      }
    }
    .goSearch {
      position: absolute;
      color: #e6b2b2;
      font-size: @SS-font;
      right: 10px;
      bottom: 15px;
    }
  }
}
// 第四部分 达人点评
.content-four {
  width: 100%;
  padding-left: 16px;
  margin-top: 34px;
  h4 {
    font-size: @L-font;
    font-weight: 600px;
  }
  img {
    width: 313px;
    height: 155px;
    margin: 20px 0;
  }
}

.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  color: #333;
  font-size: @S-font;
  div {
    .center ();
    .van-icon-like-o {
      color: pink;
      font-size: 24px;
      margin-right: 5px;
    }
    img {
      width: 80px;
      height:14px;
      margin-left: 5px;
    }
  }
}
// better scroll 外层容器
.wrap {
  position: fixed;
  top: 46px;
  bottom: 60px;
  left: 0;
  right:0;
  // border: 1px solid Red;
  overflow: hidden;
}

</style>
